<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			ul{
				list-style: none;
				width: 900px;
				margin: 0 auto;
				position: relative;
			}
			ul li{
				width: 300px;
				overflow-x: hidden;
				opacity: 0;
				position: absolute;
			}
			ul li img{
				display: block;
				width: 300px;
			}
		</style>
	</head>
	<body>
		<ul id="pics">
			<li><img src="img/1.jpg"/></li>
			<li><img src="img/2.jpg"/></li>
			<li><img src="img/3.jpg"/></li>
			<li><img src="img/4.jpg"/></li>
			<li><img src="img/5.jpg"/></li>
			<li><img src="img/6.jpg"/></li>
			<li><img src="img/7.jpg"/></li>
			<li><img src="img/8.jpg"/></li>
			<li><img src="img/9.jpg"/></li>
			<li><img src="img/10.jpg"/></li>
			<li><img src="img/11.jpg"/></li>
			<li><img src="img/12.jpg"/></li>
			<li><img src="img/13.jpg"/></li>
			<li><img src="img/14.jpg"/></li>
			<li><img src="img/15.jpg"/></li>
			<li><img src="img/16.jpg"/></li>
			<li><img src="img/17.jpg"/></li>
		</ul>
	</body>
</html>
<script type="text/javascript">
	window.onload = function(){
		setPic();
	};
	
	function setPic(){
		var lis = document.getElementById("pics").getElementsByTagName("li");
		//1、计算出元素ul容器的大小，以及li的大小，通过这两个相除的结果确定列数
		var width = lis[0].offsetWidth;  //每个li的宽度
		var count = Math.floor(document.getElementById("pics").offsetWidth/lis[0].offsetWidth);
		console.log(count);
		
		//2、创建一个数组，存储所有li中图片的高度
		var arr = [];
		for(var i = 0; i < lis.length; i++){
			var img = lis[i].getElementsByTagName("img")[0];
			console.log(img.offsetHeight);
			arr.push(img.offsetHeight);
		}
		
		//3、设置第一行：给头3张图片设置位置
		var  arr_column_height = [];
		for(var j = 0; j < count; j++){
			//设置li的位置
			lis[j].style.top = "0";
			lis[j].style.left = j * width + "px";
			lis[j].style.opacity = "1";
			arr_column_height[j] = lis[j].offsetHeight;  //设置列的高度
		}
		
		//4、设置后面的图片的位置（一定要先得到高度最短的列，然后把图片放在它下面，重新给这列赋高值）
		console.log(getMinHeight(arr_column_height));
		for(var k = count; k< lis.length; k++){
			var min = getMinHeight(arr_column_height); //第几列  >>>>>>>获取高度最短的那一列
			lis[k].style.top = arr_column_height[min] + "px";
			lis[k].style.left = min * width + "px";
			lis[k].style.opacity = "1";
			arr_column_height[min] = arr_column_height[min] + lis[k].offsetHeight; //>>>>>>重新给列数组赋高度值
		}
		
	}
	
	function getMinHeight(arr){
		var min_index = 0;
		var min_height = arr[0];
		for(var index in arr){
			if(arr[index] < min_height){
				min_index = index;
				min_height = arr[index];
			}
		}
		return min_index;
	}
</script>
